<!-- 项目策划依据 -->
<template>
  <div>
    <title-name title="项目策划依据" />
    <a-table bordered :data-source="dataSource" :columns="columns" :scroll="{ x: 1500 }" :pagination="false">
      <span slot="serial" slot-scope="text, record, index">{{ index + 1 }}</span>
      <!-- 完成程度 -->
      <template slot="finishjob" slot-scope="text, record, index">
        <span v-if="pageType === 'look'">{{ record.finishjob == 0 ? '已完成' : '未完成' }}</span>
        <EditableSelect v-else :key="index + '-finishjob'" :text="text" @change="onCellChange(record, 'finishjob', $event)" :pageType="pageType" :required='true'></EditableSelect>
      </template>
      <!-- 完成时间 -->
      <template slot="finishTime" slot-scope="text, record, index">
        <span v-if="pageType === 'look'">{{ record.finishTime }}</span>
        <EditableDate v-else :key="index + '-finishTime'" :text="text" @change="onCellChange(record, 'finishTime', $event)" :pageType="pageType" :required='true'></EditableDate>
      </template>
      <!-- 联系人 -->
      <template slot="contactName" slot-scope="text, record, index">
        <span v-if="pageType === 'look'">{{ record.contactName }}</span>
        <EditableCell :maxLength='100' v-else :key="index + '-contactName'" :text="text" @change="onCellChange(record, 'contactName', $event)" :pageType="pageType" :required='true'></EditableCell>
      </template>
      <!-- 联系电话 -->
      <template slot="contactPhone" slot-scope="text, record, index">
        <span v-if="pageType === 'look'">{{ record.contactPhone }}</span>
        <EditableCell :maxLength='100' type='number' v-else :key="index + '-contactPhone'" :text="text" @change="onCellChange(record, 'contactPhone', $event)" :pageType="pageType" :required='true'></EditableCell>
      </template>
      <!-- 项目前期工作事项 -->
      <template slot="preProjectWork" slot-scope="text, record, index">
        <span v-if="record.isDeleteButton != 1 || pageType === 'look'">{{ text }}</span>
        <EditableCell :maxLength='100' v-else :key="index + '-preProjectWork'" :text="text" @change="onCellChange(record, 'preProjectWork', $event)" :required='true'></EditableCell>
      </template>
      <template slot="operation" slot-scope="text, record, index">
        <a-popconfirm v-if="record.isDeleteButton == 1" title="请确认是否要删除？" @confirm="() => onDelete(record)">
          <a href="javascript:;">删除</a>
        </a-popconfirm>
      </template>
    </a-table>
    <a-button class="mt20" type="primary" @click="addRow" v-if="pageType === 'update'"> 增行 </a-button>
  </div>
</template>

<script>
import EditableCell from './EditableCell'
import EditableSelect from './EditableSelect'
import EditableDate from './EditableDate'
import { projectPlanningBasisColumns, templateAddRow, getGuid } from '../../config'
export default {
  name: 'ProjectPlanningBasis',
  props: {
    form: {
      type: Object,
      default: () => {}
    },
    pageType: String
  },
  watch: {
    'form.id': {
      handler(val) {
        val &&
          (this.dataSource = this.form.rationaleVOList.map((v) => {
            v.guid = getGuid()
            return v
          }))
      },
      immediate: true
    },
    pageType: {
      handler(val) {
        if (val === 'look') {
         this.columns.pop()
        }
      },
      immediate: true
    }
  },
  data() {
    return {
      dataSource: [],
      columns: [...projectPlanningBasisColumns]
    }
  },

  components: { EditableCell, EditableSelect, EditableDate },

  computed: {},

  created() {},

  mounted() {},

  methods: {
    onCellChange(item, dataIndex, value) {
      const dataSource = this.$clone(this.dataSource)
      const target = dataSource.find((el) => el.guid === item.guid)
      if (target) {
        target[dataIndex] = value
        this.dataSource = dataSource
      }
    },
    onDelete(item) {
      const dataSource = this.$clone(this.dataSource)
      this.dataSource = dataSource.filter((el) => el.guid !== item.guid)
    },
    addRow() {
      const { dataSource } = this
      this.dataSource = [...dataSource, { ...templateAddRow, guid: getGuid() }]
    }
  }
}
</script>
<style lang='less' scoped>
</style>